<template>
  <div class="front-layout">
    <!-- 添加专门的拖动区域 -->
    <div class="drag-region" data-tauri-drag-region></div>
    <FrontEndHeader :teamInfo :gameInfo />
    <FrontEndMain :gameInfo />
    <FrontEndFooter :teamInfo :gameInfo />
  </div>
</template>

<script setup lang='ts' name="FrontEndComp">
import FrontEndHeader from './FrontEndHeader.vue';
import FrontEndMain from './FrontEndMain.vue';
import FrontEndFooter from './FrontEndFooter.vue';
import BoardChannel from '@/utils/boardChannel';
import storeHelper from '@/utils/TauriStore';

const channel = new BoardChannel('bp-system');

const teamInfo = reactive<TeamInfo>({
  team1: {
    logo: '',
    teamName: '',
    survivor: [],
    hunter: ''
  },
  team2: {
    logo: '',
    teamName: '',
    survivor: [],
    hunter: ''
  }
});

const gameInfo = reactive<IncSessionGameInfo>({
  session: 'bo1',
  banMap: null,
  pickMap: null,
  survivorTeam: 'team1',
  hunterTeam: 'team2',
  team1Score: {
    win: 0,
    down: 0,
    lose: 0,
    smallScore: 0,
    gloalban: []
  },
  team2Score: {
    win: 0,
    down: 0,
    lose: 0,
    smallScore: 0,
    gloalban: []
  }
})
onMounted(() => {
  _init();
  channel.on('teamInfoChange', async (bool: boolean) => {
    if (bool) {
      _init();
    }
  });
  channel.on('gameInfoChange', (info: IncSessionGameInfo) => {
    Object.assign(gameInfo, info);
  })
})
async function _init() {
  try {
    const teams = await storeHelper.get('teamInfo');
    const session = await storeHelper.get('session');
    const gameStoreInfo = await storeHelper.get('gameInfo');
    if (typeof gameStoreInfo === 'object') {
      Object.assign(gameInfo, gameStoreInfo, { session });
    }
    if (typeof teams === 'object') {
      Object.assign(teamInfo, teams);
    }
  } catch (error) {
    console.log(error);
  }
}

</script>
<style scoped lang='scss'>
.front-layout {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 80px auto 168px;
  position: relative; 
  cursor: move;

  .drag-region {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; // 与header高度一致
    z-index: 9999;
    /* 兼容性写法 */
  }
}
</style>